import { useState, useEffect } from 'react';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import Setting from './Setting';
import { useAuth } from '../context/AuthProvider';
import * as ImagePicker from 'expo-image-picker';
import { FlatList, StyleSheet, ImageBackground, Text, Button, View, Image, TextInput, ScrollView } from 'react-native';

const ModifyInformation = ({ navigation }) => {
    const { user, setUser } = useAuth();
    const [userName, setuserName] = useState("");
    const [password, setpassword] = useState("");
    const [sex, setsex] = useState("");
    const [birthday, setbirthday] = useState("");
    const [image, setImage] = useState('https://ts1.cn.mm.bing.net/th/id/R-C.abb349a4310cb474a609db456e6a4655?rik=%2fbb8KDX4kJ1Bkg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f40%2f44%2f80573cfeafb858a.jpg&ehk=tw8blQ9jfJcIQYEWyA4prAIl4QQzVfa4UCMnU01G9SM%3d&risl=&pid=ImgRaw&r=0');
    const onBtn = () => {
        useEffect(() => {
            fetch('http://10.7.89.170:3000/Etiduser',
                {
                    method: 'POST',
                    body: JSON.stringify({
                        userName1: user.userName,
                        userName: userName,
                        password: password,
                        sex: sex,
                        birthday: birthday
                    })
                })
                .then(res => res.json())
                .then(res => {
                    setUser(res.List)
                    console.log(user);
                    console.log(user.userName);
                    console.log(res.List)
                    navigation.navigate('Setting')
                })
        }, [])
    }
    const Center = () => {
        navigation.navigate('Setting')
    }

    // 上传照片信息到后台然后存储进数据库
    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });
        // console.log(result);
        // console.log(result.assets);
        // assets中存储了图片的信息
        if (!result.canceled) {
            setImage(result.assets[0].uri);
            fetch("http://10.7.89.174:3000/uploadimg", {
                method: 'POST',

            }).then(data => {

            })
        }
    };

    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
            ),
        })
    }, [])
    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={{ marginTop: 20, marginLeft: "36%", justifyContent: 'center', alignContent: 'center' }}>
                    {/* 上传图片 */}
                    <View>
                        <View>
                            <Image
                                source={{ uri: image }}
                                style={{ width: "50%", height: 120, marginLeft: 0, marginTop: 10 }}
                            />
                        </View>
                        <View style={{
                            width: "40%",
                            height: 50,
                            marginLeft: "5%",
                            marginTop: 10
                        }}>
                            <Button
                                key='img'
                                title="图片"
                                onPress={pickImage}
                                color='#f9748f'//注意，使用表达式需要添加大括号
                            >
                            </Button>
                        </View>
                    </View>
                </View>
                <View style={{ width: "90%", marginLeft: "5%", marginTop: 5 }}>
                    <View style={{ marginTop: 30 }}>
                        <Text style={{ marginLeft: "10%" }}>用户名</Text>
                        <TextInput
                            placeholder="单行输入"
                            value={userName}
                            onChangeText={(value) => setuserName(value)}
                            style={{ height: 40, width: "60%", borderColor: 'grey', borderWidth: 1, marginLeft: "30%", marginTop: "-7%" }}
                        />
                    </View>
                    <View style={{ marginTop: 30 }}>
                        <Text style={{ marginLeft: "10%" }}>密 码</Text>
                        <TextInput
                            placeholder="单行输入"
                            value={password}
                            onChangeText={(value) => setpassword(value)}
                            style={{ height: 40, width: "60%", borderColor: 'grey', borderWidth: 1, marginLeft: "30%", marginTop: "-7%" }}
                        />
                    </View>
                    <View style={{ marginTop: 30 }}>
                        <Text style={{ marginLeft: "10%" }}>性 别</Text>
                        <TextInput
                            placeholder="单行输入"
                            value={sex}
                            onChangeText={(value) => setsex(value)}
                            style={{ height: 40, width: "60%", borderColor: 'grey', borderWidth: 1, marginLeft: "30%", marginTop: "-7%" }}
                        />
                    </View>
                    <View style={{ marginTop: 30 }}>
                        <Text style={{ marginLeft: "10%" }}>生 日</Text>
                        <TextInput
                            placeholder="单行输入"
                            value={birthday}
                            onChangeText={(value) => setbirthday(value)}
                            style={{ height: 40, width: "60%", borderColor: 'grey', borderWidth: 1, marginLeft: "30%", marginTop: "-7%" }}
                        />
                    </View>
                </View>
                <View style={{ width: "50%", marginLeft: "25%", marginTop: 40 }}>
                    <Button
                        title="保存"
                        onPress={() => onBtn()}
                    />
                </View>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
    img: {
        width: 100,
        height: 100,
        marginLeft: 20,
        marginTop: 10,
        borderColor: 'gray',
        borderWidth: 1,
        textAlign: 'center'
    }
});

export default ModifyInformation 